If you purchased our product from other websites except www.safeinput.com, please contact us(admin@safeinput.com) and we will send you the Serial Number.  

	The installation requires some HTML and CSS knowledge. Please read the complete instruction before you start.
By following steps in this instruction, you will be able to install SafeInput Control on your website, 
and you will get a Login field just like the "Secure Login" we used on SafeInput.com


To install the SafeInput Control: 

	1. You can change the CSS into whichever you prefer. The CSS we provide is the one we used for DEMO on SafeInput.com, 
	If you want to use this CSS as a start, please Upload tableft.gif and tabright.gif to your image folder, 
	and change 'YOU_DOMAIN' to your domain name. 
	
	2. In <SCRIPT LANGUAGE="JavaScript">, find "function getContent(TabId)", in both "objContent.innerHTML" 
	and "objContent1.innerHTML", change 'YOU_DOMAIN' to your domain name and change 'Your Serial Number' to 
	the Serial Number provided by us. 
	
	3. Find objContent1.innerHTML = '<input type="text" name="username" size="18" maxlength="32" /><br />'; and
	objContent.innerHTML = '<input type="password" name="pass" size="18" maxlength="32" /><br />';	
	Replace the content inside the <input> tab with your own. 
	You can find the content in your website's login form file or template file.
	This step may vary across different websites.
	
		3-1. In "function getContent(TabId)" Find 
		<input type="hidden" name="uname" id="safepass" value="" /><br>'; Make sure the values of 'name' are consistent with your own login form.
		
		3-2. In "function getContent(TabId)" Find 
		<input type="hidden" name="pass" id="safepass" value="" />'; Make sure the values of 'name' are consistent with your own login form.
		
	4. Find "function VerifyInstall(strObjName)", change 'YOU_DOMAIN' to your own domain name.
		
	5. Find <form action="http://www.YOU_DOMAIN.com/login.php" replace this URL with your own login URL. 
	This step may vary across different websites.

	6. There are several <input> tabs at the end of this instruction, Replace the content inside the <input> tab with your own.
	You can find the content in your website's login form file or template file.
	This step may vary across different websites.
	
	7. Upload 'seditor.cab' to http://www.YOU_DOMAIN.com
	
	8. Copy all of the content below ******************** to your login form file or template file, and delete the old corresponding content.

	Important: Don't change any other code in the JavaScript unless you know exactly what you are doing.	



****************************************

<style type="text/css">

    #left_box {
      float:left;
      width:100%;
	  padding-top:0px;
      font-size:100%;
      line-height:normal;
      }      
    #tabs {
      float:left;
      width:100%;
      font-size:100%;
      line-height:normal;
      }
    #tabs ul {
        margin:0;
        padding:10px 10px 0px 0px;
        list-style:none;
      }
    #tabs li {
      display:inline;
      margin:0;
      }
    #tabs a {
      float:left;     
      background:url("http://www.YOU_DOMAIN.com/images/tableft.gif") no-repeat left top; 
      margin:0;
      text-decoration:none; padding-left:4px; padding-right:0; padding-top:0; padding-bottom:0
      }
    #tabs a span {
      float:left;
      display:block;
      background:url("http://www.YOU_DOMAIN.com/images/tabright.gif") no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#0066CC;
	  font: bold 12px/1.5em Verdana;
      }

    #tabs a span {float:none;}

    #tabs a:hover span {
      color:#FF9834;
      }
    #tabs a:hover {
      background-position:0% -42px;
      }
    #tabs a:hover span {
      background-position:100% -42px;
      }

        #tabs .current a {
                background-position:0% -42px;
        }
        #tabs .current a span {
                background-position:100% -42px;
        }
</style>

<SCRIPT LANGUAGE="JavaScript">
function IsWindows()
{
	var m1 = navigator.userAgent.search(/Windows/ig);
	var m2 = navigator.platform.search(/Win32/ig);

	if (m1 >= 0 && m2 >= 0)
	{
		return true;
	}
	else
	{
		return false;
	}
}

function IsIE()
{
	if(window.ActiveXObject && navigator.userAgent.search(/MSIE/ig) >= 0)
		return true;
	else
		return false;

}

function show(TabId)
{
	var objNormalTab = document.getElementById("normal");
	var objNormalTabClass = objNormalTab.getAttribute("class");
	if (objNormalTabClass == null)
		objNormalTabClass = objNormalTab.getAttribute("className");
	var objSateTab = document.getElementById("safe");
	var objSateTabClass = objSateTab.getAttribute("class");
	if (objSateTabClass == null)
		objSateTabClass = objSateTab.getAttribute("className");
	switch(TabId)
	{
	case "normal":
		if (objNormalTabClass != null && objNormalTabClass=="hide")
		{
			objNormalTab.setAttribute("class","current"); 
			objNormalTab.setAttribute("className","current");
			objSateTab.setAttribute("class","hide"); 
			objSateTab.setAttribute("className","hide");
			getContent(TabId);
		}
		break;
	case "safe":

		if (objSateTabClass != null && objSateTabClass=="hide")
		{
			objSateTab.setAttribute("class","current"); 
			objSateTab.setAttribute("className","current");
			objNormalTab.setAttribute("class","hide"); 
			objNormalTab.setAttribute("className","hide");
			if (!IsWindows() || !IsIE())
			{
				var objContent = document.getElementById("inputcontrolcontent");
				
				var c = "You are not using a Windows system, or You are not using an IE explorer. In order to activate SafeInput control you have to use a Windows system and an IE explorer.";
				objContent.innerHTML = c;
			}
			else
			{
				getContent(TabId);
			}
		}
		break;
	default:
		break;
	}
}


function getContent(TabId)
{
	var objContent = document.getElementById("inputcontrolcontent");
	var objContent1 = document.getElementById("inputcontrolcontent1");
	switch(TabId)
	{
	case "normal":
		objContent1.innerHTML = '<input type="text" name="username" size="18" maxlength="32" /><br />';
		objContent.innerHTML = '<input type="password" name="pass" size="18" maxlength="32" /><br />';
		break;
	case "safe":
		objContent1.innerHTML = '<object id="SAFEditor"  codebase="http://www.YOU_DOMAIN.com/seditor.cab#version=1,0,0,3" classid="CLSID:C786F27B-E175-4CF7-B219-02253E707D88" style="width: 160px; height: 22px" ><param name="type" value="text" /><param name="readonly" value="0" /><param name="maxlength" value="32" /><param name="ValidChar" value="[a-zA-Z0-9!@#$%^&*_]" /><param name="BackColor" value="#FFFFFF" /><param name="ForeColor" value="#000000" /><param name="SerialNumber" value="Your Serial Number" /></object><input type="hidden" name="uname" id="safepass" value="" /><br>';
		objContent.innerHTML = '<object id="SAFEditor"  codebase="http://www.YOU_DOMAIN.com/seditor.cab#version=1,0,0,3" classid="CLSID:C786F27B-E175-4CF7-B219-02253E707D88" style="width: 160px; height: 22px" ><param name="type" value="password" /><param name="readonly" value="0" /><param name="maxlength" value="32" /><param name="MaskChar" value="*" /><param name="ValidChar" value="[a-zA-Z0-9!@#$%^&*_]" /><param name="BackColor" value="#FFFFFF" /><param name="ForeColor" value="#000000" /><param name="SerialNumber" value="Your Serial Number" /></object><br /><input type="hidden" name="pass" id="safepass" value="" />';
		var note = VerifyInstall("SAFEditor");
		if (note != null)
			objContent.innerHTML += note;
		break;
	default:
		break;
	}
}

function ShowValue(strObjName)
{
    if(window.ActiveXObject)
    {
        try
        {
            var PassContent = document.getElementById(strObjName).GetValue();
            return PassContent;
        }catch(e){}
    }
}

function VerifyInstall(strObjName)
{
	if(window.ActiveXObject)
    {
        try
        {
            var PassContent = document.getElementById(strObjName).GetValue();
			return null;
        }catch(e){
			return "<font color=\"#CC3300\"><a href=\"http://www.YOU_DOMAIN.com/seditor.cab\">Please install SafeInput control in order to use secure login.</a></font><br />";
		}
    }
}


function submit_form()
{
	try
	{	
		var p = document.getElementById("safepass");
		if (p == null) 
			return true;
		else
			p.value = ShowValue('SAFEditor');
		return true;
	}
	catch(e)
	{
		return false;
	}	
}
</SCRIPT>

	<div id="tabs">
		<ul style="position: relative; left: 0; top: 0">
		<li class="hide" id="normal"><a href="#" onclick="show('normal')"><span>Standard Input</span></a></li>
		<li class="hide" id="safe"><a href="#" onclick="show('safe')"><span>SafeInput Control</span></a></li>
		</ul>
	</div>
	<div id="left_box" style="width: 579px;"> 
		<form action="http://www.YOU_DOMAIN.com/login.php" method="POST" onsubmit="return submit_form();" style="border-style: ridge; border-width: 1px; ">
		<blockquote>
		<font face="Times New Roman" size="3">Username <span id="inputcontrolcontent1"></span>		Password <span id="inputcontrolcontent"></span>
			<input type="hidden" name="op" value="login" />
			<input type="hidden" name="redirect" value="" /></font>
			<input name="submit" type="submit" class="hugh" value="Login"><br>
			<font face="Arial" size="3"><font face="Times New Roman" size="3">
		<p></p>
		</blockquote>
		</form><script>
		var objContent = document.getElementById("inputcontrolcontent");
		if (objContent.innerHTML == "") { show('normal'); }
		</script>
		<p><br />
	</div>


	
	